<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 2px solid #ccc; display: block;margin: 50px auto;">
			
		</canvas>
		
		<script>
			window.onload = function(){
				//lineWidth线条的宽度
				//lineCap线条两端的形状
				//默认butt(无) round  square
			var canvas = document.getElementById("canvas");
			canvas.width =800;
	        canvas.height =880;
			 
	 var context = canvas.getContext("2d");//2d环境
	 context.lineWidth=50;//线条的宽度
	 context.strokeStyle="blue";//线的颜色
	
	//平的
	 context.beginPath();
	 context.moveTo(100,100);//起点
	 context.lineTo(600,100);//
	 context.lineCap="butt";
	 context.stroke();//绘制出来
	 
	 
	 //半圆形突出
	 context.beginPath();
	 context.moveTo(100,300);//起点
	 context.lineTo(600,300);//
	 context.lineCap="round";
	 context.stroke();//绘制出来
	 
	 //矩形突出，可以封闭图形
	 context.beginPath();
	 context.moveTo(100,500);//起点
	 context.lineTo(600,500);//
	 context.lineCap="square";
	 context.stroke();//绘制出来
	 
	 //baseline比较线
	 context.lineWidth =1;
	 context.strokeStyle="burlywood";
	 context.moveTo(100,50);
	 context.lineTo(100,700);
	  context.moveTo(600,50);
	 context.lineTo(600,700);
	context.stroke();
	 
				
			}
		
			
		</script>
	</body>
</html>
